<template>
  <div class="progress-container" @click="handleClick" ref="progressContainer">
    <div class="progress-track">
      <div class="progress-buffer" :style="{ width: bufferPercentage + '%' }"></div>
      <div class="progress-fill" :style="{ width: progressPercentage + '%' }"></div>
      <div class="progress-thumb" :style="{ left: progressPercentage + '%' }" @mousedown="startDrag"
        :class="{ 'dragging': isDragging }"></div>
    </div>
    <div class="time-tooltip" v-if="showTooltip" :style="{ left: tooltipPosition + '%' }">
      {{ formatTime(tooltipTime) }}
    </div>
  </div>
</template>

<script setup>
import { ref, computed, nextTick, onMounted, onBeforeUnmount, defineProps, defineEmits } from 'vue'

// Props
const props = defineProps({
  current: {
    type: Number,
    default: 0
  },
  duration: {
    type: Number,
    default: 0
  },
  buffer: {
    type: Number,
    default: 0
  }
})

// Emits
const emit = defineEmits(['seek'])

// 响应式数据
const isDragging = ref(false)
const showTooltip = ref(false)
const tooltipPosition = ref(0)
const tooltipTime = ref(0)
const dragStartX = ref(0)
const dragStartProgress = ref(0)

// 模板引用
const progressContainer = ref(null)

// 计算属性
const progressPercentage = computed(() => {
  if (props.duration === 0) return 0
  return Math.min((props.current / props.duration) * 100, 100)
})

const bufferPercentage = computed(() => {
  if (props.duration === 0) return 0
  return Math.min((props.buffer / props.duration) * 100, 100)
})

// 方法
const handleClick = (event) => {
  if (isDragging.value || !progressContainer.value) return

  const rect = progressContainer.value.getBoundingClientRect()
  const x = event.clientX - rect.left
  const percentage = (x / rect.width) * 100
  const time = (percentage / 100) * props.duration

  console.log(`📊 ProgressBar点击: percentage=${percentage.toFixed(2)}%, time=${time.toFixed(2)}s, duration=${props.duration}s`)
  emit('seek', Math.max(0, Math.min(time, props.duration)))
}

const startDrag = (event) => {
  event.preventDefault()
  isDragging.value = true
  dragStartX.value = event.clientX
  dragStartProgress.value = progressPercentage.value
}

const handleDrag = (event) => {
  if (!isDragging.value || !progressContainer.value) return

  const rect = progressContainer.value.getBoundingClientRect()
  const deltaX = event.clientX - dragStartX.value
  const deltaPercentage = (deltaX / rect.width) * 100
  const newPercentage = Math.max(0, Math.min(100, dragStartProgress.value + deltaPercentage))
  const newTime = (newPercentage / 100) * props.duration

  console.log(`📊 ProgressBar拖拽: newPercentage=${newPercentage.toFixed(2)}%, newTime=${newTime.toFixed(2)}s`)
  emit('seek', newTime)
}

const stopDrag = () => {
  isDragging.value = false
}

const showTooltipHandler = () => {
  showTooltip.value = true
}

const hideTooltipHandler = () => {
  if (!isDragging.value) {
    showTooltip.value = false
  }
}

const updateTooltip = (event) => {
  if (!showTooltip.value && !isDragging.value) return
  if (!progressContainer.value) return

  const rect = progressContainer.value.getBoundingClientRect()
  const x = event.clientX - rect.left
  const percentage = Math.max(0, Math.min(100, (x / rect.width) * 100))
  const time = (percentage / 100) * props.duration

  tooltipPosition.value = percentage
  tooltipTime.value = time
}

const formatTime = (time) => {
  const minutes = Math.floor(time / 60)
  const seconds = Math.floor(time % 60)
  return `${minutes}:${seconds.toString().padStart(2, '0')}`
}

// 生命周期
onMounted(() => {
  document.addEventListener('mousemove', handleDrag)
  document.addEventListener('mouseup', stopDrag)

  nextTick(() => {
    if (progressContainer.value) {
      progressContainer.value.addEventListener('mouseenter', showTooltipHandler)
      progressContainer.value.addEventListener('mouseleave', hideTooltipHandler)
      progressContainer.value.addEventListener('mousemove', updateTooltip)
    }
  })
})

onBeforeUnmount(() => {
  document.removeEventListener('mousemove', handleDrag)
  document.removeEventListener('mouseup', stopDrag)

  if (progressContainer.value) {
    progressContainer.value.removeEventListener('mouseenter', showTooltipHandler)
    progressContainer.value.removeEventListener('mouseleave', hideTooltipHandler)
    progressContainer.value.removeEventListener('mousemove', updateTooltip)
  }
})
</script>

<style scoped>
.progress-container {
  position: relative;
  width: 100%;
  height: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.progress-track {
  position: relative;
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  overflow: hidden;
  transition: height 0.2s ease;
}

.progress-container:hover .progress-track {
  height: 8px;
}

.progress-buffer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  transition: width 0.1s ease;
}

.progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  transition: width 0.1s ease;
}

.progress-thumb {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: grab;
  opacity: 0;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.progress-container:hover .progress-thumb {
  opacity: 1;
}

.progress-thumb:hover {
  transform: translate(-50%, -50%) scale(1.2);
}

.progress-thumb.dragging {
  opacity: 1;
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.3);
}

.time-tooltip {
  position: absolute;
  bottom: 100%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  margin-bottom: 8px;
  backdrop-filter: blur(10px);
  pointer-events: none;
}

.time-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.8);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .progress-track {
    height: 8px;
  }

  .progress-container:hover .progress-track {
    height: 10px;
  }

  .progress-thumb {
    width: 20px;
    height: 20px;
    opacity: 1;
  }
}
</style>